// 二手商品地图展示系统
document.addEventListener('DOMContentLoaded', function () {
  // 初始化变量
  let mapChart = null;
  let currentGoodsType = '珠宝'; // 默认选中的商品类型
  let goodsData = {}; // 存储所有商品数据

  // 加载地图数据
  $.get('static/json/map.json', function (chinaJson) {
    // 注册地图数据
    echarts.registerMap('china', chinaJson);

    // 初始化图表
    initChart();

  });

  // 初始化图表
  function initChart() {
    if (mapChart) {
      mapChart.dispose();
    }

    // 初始化地图
    mapChart = echarts.init(document.getElementById('goodsMapChart'));

    // 设置默认数据
    useDefaultData();

    // 商品类型选择事件处理
    document.getElementById('goodsTypeSelect').addEventListener('change', function () {
      currentGoodsType = this.value;
      renderGoodsMap(currentGoodsType);
    });

    // 初始加载地图
    renderGoodsMap(currentGoodsType);

    // 窗口大小变化时调整图表大小
    window.addEventListener('resize', function () {
      if (mapChart) {
        mapChart.resize();
      }
    });
  }

  // 使用默认数据
  function useDefaultData() {
    goodsData = {
      '珠宝': {
        '北京市': 15678, '上海市': 18456, '广东省': 23567, '浙江省': 16789, '江苏省': 14532,
        '四川省': 9876, '山东省': 12345, '河北省': 7654, '河南省': 8765, '湖北省': 9876,
        '湖南省': 8765, '福建省': 10234, '安徽省': 7654, '江西省': 5432, '广西壮族自治区': 6543,
        '贵州省': 4321, '云南省': 5432, '陕西省': 6543, '山西省': 5432, '黑龙江省': 4321,
        '吉林省': 3456, '辽宁省': 7654, '内蒙古自治区': 3456, '宁夏回族自治区': 2345, '新疆维吾尔自治区': 3456,
        '青海省': 2345, '甘肃省': 3456, '西藏自治区': 1234, '海南省': 4567, '重庆市': 8765,
        '天津市': 7654, '香港特别行政区': 9876, '澳门特别行政区': 3456, '台湾省': 5678
      },
      '手机': {
        '北京市': 25678, '上海市': 28456, '广东省': 33567, '浙江省': 26789, '江苏省': 24532,
        '四川省': 19876, '山东省': 22345, '河北省': 17654, '河南省': 18765, '湖北省': 19876,
        '湖南省': 18765, '福建省': 20234, '安徽省': 17654, '江西省': 15432, '广西壮族自治区': 16543,
        '贵州省': 14321, '云南省': 15432, '陕西省': 16543, '山西省': 15432, '黑龙江省': 14321,
        '吉林省': 13456, '辽宁省': 17654, '内蒙古自治区': 13456, '宁夏回族自治区': 12345, '新疆维吾尔自治区': 13456,
        '青海省': 12345, '甘肃省': 13456, '西藏自治区': 11234, '海南省': 14567, '重庆市': 18765,
        '天津市': 17654, '香港特别行政区': 19876, '澳门特别行政区': 13456, '台湾省': 15678
      },
      '相机': {
        '北京': 5678, '上海': 6456, '广东': 7567, '浙江': 6789, '江苏': 5532,
        '四川': 4876, '山东': 5345, '河北': 3654, '河南': 3765, '湖北': 4876,
        '湖南': 3765, '福建': 4234, '安徽': 3654, '江西': 2432, '广西': 2543,
        '贵州': 2321, '云南': 2432, '陕西': 2543, '山西': 2432, '黑龙江': 2321,
        '吉林': 1456, '辽宁': 3654, '内蒙古': 1456, '宁夏': 1345, '新疆': 1456,
        '青海': 1345, '甘肃': 1456, '西藏': 1234, '海南': 2567, '重庆': 3765,
        '天津': 3654, '香港': 4876, '澳门': 1456, '台湾': 2678
      },
      '电脑': {
        '北京市': 18678, '上海市': 19456, '广东省': 21567, '浙江省': 19789, '江苏省': 18532,
        '四川省': 15876, '山东省': 16345, '河北省': 14654, '河南省': 14765, '湖北省': 15876,
        '湖南省': 14765, '福建省': 16234, '安徽省': 14654, '江西省': 13432, '广西壮族自治区': 13543,
        '贵州省': 12321, '云南省': 13432, '陕西省': 13543, '山西省': 13432, '黑龙江省': 12321,
        '吉林省': 11456, '辽宁省': 14654, '内蒙古自治区': 11456, '宁夏回族自治区': 10345, '新疆维吾尔自治区': 11456,
        '青海省': 10345, '甘肃省': 11456, '西藏自治区': 9234, '海南省': 12567, '重庆市': 14765,
        '天津市': 14654, '香港特别行政区': 15876, '澳门特别行政区': 11456, '台湾省': 13678
      },
      '电器家具': {
        '北京市': 12678, '上海市': 13456, '广东省': 15567, '浙江省': 13789, '江苏省': 12532,
        '四川省': 9876, '山东省': 10345, '河北省': 8654, '河南省': 8765, '湖北省': 9876,
        '湖南省': 8765, '福建省': 10234, '安徽省': 8654, '江西省': 7432, '广西壮族自治区': 7543,
        '贵州省': 6321, '云南省': 7432, '陕西省': 7543, '山西省': 7432, '黑龙江省': 6321,
        '吉林省': 5456, '辽宁省': 8654, '内蒙古自治区': 5456, '宁夏回族自治区': 4345, '新疆维吾尔自治区': 5456,
        '青海省': 4345, '甘肃省': 5456, '西藏自治区': 3234, '海南省': 6567, '重庆市': 8765,
        '天津市': 8654, '香港特别行政区': 9876, '澳门特别行政区': 5456, '台湾省': 7678
      },
      '图书': {
        '北京市': 22678, '上海市': 23456, '广东省': 25567, '浙江省': 23789, '江苏省': 22532,
        '四川省': 19876, '山东省': 20345, '河北省': 18654, '河南省': 18765, '湖北省': 19876,
        '湖南省': 18765, '福建省': 20234, '安徽省': 18654, '江西省': 17432, '广西壮族自治区': 17543,
        '贵州省': 16321, '云南省': 17432, '陕西省': 17543, '山西省': 17432, '黑龙江省': 16321,
        '吉林省': 15456, '辽宁省': 18654, '内蒙古自治区': 15456, '宁夏回族自治区': 14345, '新疆维吾尔自治区': 15456,
        '青海省': 14345, '甘肃省': 15456, '西藏自治区': 13234, '海南省': 16567, '重庆市': 18765,
        '天津市': 18654, '香港特别行政区': 19876, '澳门特别行政区': 15456, '台湾省': 17678
      },
      '二手书': {
        '北京市': 16678, '上海市': 17456, '广东省': 19567, '浙江省': 17789, '江苏省': 16532,
        '四川省': 13876, '山东省': 14345, '河北省': 12654, '河南省': 12765, '湖北省': 13876,
        '湖南省': 12765, '福建省': 14234, '安徽省': 12654, '江西省': 11432, '广西壮族自治区': 11543,
        '贵州省': 10321, '云南省': 11432, '陕西省': 11543, '山西省': 11432, '黑龙江省': 10321,
        '吉林省': 9456, '辽宁省': 12654, '内蒙古自治区': 9456, '宁夏回族自治区': 8345, '新疆维吾尔自治区': 9456,
        '青海省': 8345, '甘肃省': 9456, '西藏自治区': 7234, '海南省': 10567, '重庆市': 12765,
        '天津市': 12654, '香港特别行政区': 13876, '澳门特别行政区': 9456, '台湾省': 11678
      },
      '卡卷': {
        '北京市': 8678, '上海市': 9456, '广东省': 11567, '浙江省': 9789, '江苏省': 8532,
        '四川省': 5876, '山东省': 6345, '河北省': 4654, '河南省': 4765, '湖北省': 5876,
        '湖南省': 4765, '福建省': 6234, '安徽省': 4654, '江西省': 3432, '广西壮族自治区': 3543,
        '贵州省': 2321, '云南省': 3432, '陕西省': 3543, '山西省': 3432, '黑龙江省': 2321,
        '吉林省': 1456, '辽宁省': 4654, '内蒙古自治区': 1456, '宁夏回族自治区': 345, '新疆维吾尔自治区': 1456,
        '青海省': 345, '甘肃省': 1456, '西藏自治区': 234, '海南省': 2567, '重庆市': 4765,
        '天津市': 4654, '香港特别行政区': 5876, '澳门特别行政区': 1456, '台湾省': 3678
      },
      '箱包': {
        '北京市': 10678, '上海市': 11456, '广东省': 13567, '浙江省': 11789, '江苏省': 10532,
        '四川省': 7876, '山东省': 8345, '河北省': 6654, '河南省': 6765, '湖北省': 7876,
        '湖南省': 6765, '福建省': 8234, '安徽省': 6654, '江西省': 5432, '广西壮族自治区': 5543,
        '贵州省': 4321, '云南省': 5432, '陕西省': 5543, '山西省': 5432, '黑龙江省': 4321,
        '吉林省': 3456, '辽宁省': 6654, '内蒙古自治区': 3456, '宁夏回族自治区': 2345, '新疆维吾尔自治区': 3456,
        '青海省': 2345, '甘肃省': 3456, '西藏自治区': 1234, '海南省': 4567, '重庆市': 6765,
        '天津市': 6654, '香港特别行政区': 7876, '澳门特别行政区': 3456, '台湾省': 5678
      },
      '文玩': {
        '北京市': 7678, '上海市': 8456, '广东省': 10567, '浙江省': 8789, '江苏省': 7532,
        '四川省': 4876, '山东省': 5345, '河北省': 3654, '河南省': 3765, '湖北省': 4876,
        '湖南省': 3765, '福建省': 5234, '安徽省': 3654, '江西省': 2432, '广西壮族自治区': 2543,
        '贵州省': 1321, '云南省': 2432, '陕西省': 2543, '山西省': 2432, '黑龙江省': 1321,
        '吉林省': 456, '辽宁省': 3654, '内蒙古自治区': 456, '宁夏回族自治区': 345, '新疆维吾尔自治区': 456,
        '青海省': 345, '甘肃省': 456, '西藏自治区': 234, '海南省': 1567, '重庆市': 3765,
        '天津市': 3654, '香港特别行政区': 4876, '澳门特别行政区': 456, '台湾省': 2678
      }
    };
  }

  // 加载Excel数据
  function loadExcelData() {
    fetch('../static/csv/商品销量.xlsx')
      .then(response => {
        if (!response.ok) {
          throw new Error('网络错误');
        }
        return response.arrayBuffer();
      })
      .then(buffer => {
        const data = new Uint8Array(buffer);
        const workbook = XLSX.read(data, { type: 'array' });

        // 假设Excel的第一个工作表包含数据
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];

        // 将工作表转换为JSON
        const jsonData = XLSX.utils.sheet_to_json(worksheet);

        // 处理数据并整理为所需格式
        processExcelData(jsonData);
      })
      .catch(error => {
        console.error('加载Excel文件失败:', error);
        // 失败时会使用默认模拟数据
      });
  }

  // 处理Excel数据
  function processExcelData(jsonData) {
    // 假设Excel格式为：第一列是商品类型，后面的列是各省份数据
    if (jsonData.length === 0) return;

    // 获取所有列名（除第一列外都是省份名）
    const firstRow = jsonData[0];
    const keys = Object.keys(firstRow);
    const goodsTypeKey = keys[0]; // 第一列是商品类型
    const provinceKeys = keys.slice(1, -1); // 中间列是省份数据（假设最后一列是总计）

    // 遍历数据行
    jsonData.forEach(row => {
      const goodsType = row[goodsTypeKey];
      if (!goodsType) return;

      // 为每种商品类型创建数据结构
      goodsData[goodsType] = {};

      // 添加各省份数据
      provinceKeys.forEach(province => {
        const value = parseInt(row[province]) || 0;
        goodsData[goodsType][province] = value;
      });
    });

    // 更新下拉菜单选项
    updateGoodsTypeOptions(Object.keys(goodsData));

    // 如果图表已经初始化，刷新当前图表
    if (mapChart) {
      renderGoodsMap(currentGoodsType);
    }
  }

  // 更新商品类型下拉菜单
  function updateGoodsTypeOptions(goodsTypes) {
    const select = document.getElementById('goodsTypeSelect');
    select.innerHTML = '';

    goodsTypes.forEach(type => {
      const option = document.createElement('option');
      option.value = type;
      option.textContent = type;
      select.appendChild(option);
    });

    // 设置当前选中项
    select.value = currentGoodsType;
  }

  // 渲染商品地图
  function renderGoodsMap(goodsType) {
    if (!mapChart) return;

    // 更新当前商品类型显示
    document.getElementById('currentGoodsType').textContent = goodsType;
    document.getElementById('trendGoodsType').textContent = goodsType;

    // 获取当前商品类型的数据
    const currentData = goodsData[goodsType] || {};

    // --- BEGIN DEBUG LOGS ---
    console.log('Rendering map for goodsType:', goodsType);
    console.log('Current data for ' + goodsType + ':', JSON.parse(JSON.stringify(currentData)));
    // --- END DEBUG LOGS ---

    // 计算总数
    let totalCount = 0;
    for (let province in currentData) {
      totalCount += currentData[province];
    }
    document.getElementById('totalGoodsCount').textContent = totalCount.toLocaleString();

    // 更新趋势分析内容
    updateTrendAnalysis(goodsType);

    // 将数据格式化为ECharts需要的格式
    const formattedData = [];
    for (let province in currentData) {
      formattedData.push({
        name: province,
        value: currentData[province]
      });
    }

    // --- BEGIN DEBUG LOGS ---
    console.log('Formatted data for ' + goodsType + ':', JSON.parse(JSON.stringify(formattedData)));
    // --- END DEBUG LOGS ---

    // 排序省份数据，用于显示排行榜
    const sortedProvinces = Object.entries(currentData)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 5); // 取前5名

    // 更新排行榜
    updateRankList(sortedProvinces);

    // 如果没有数据，显示提示信息
    if (formattedData.length === 0) {
      // --- BEGIN DEBUG LOGS ---
      console.log('No formatted data found for ' + goodsType + '. Showing "暂无数据".');
      // --- END DEBUG LOGS ---
      mapChart.showLoading({
        text: '暂无数据',
        maskColor: 'rgba(0, 0, 0, 0.8)',
        fontSize: 20,
        textColor: '#ffffff'
      });
      return;
    } else {
      mapChart.hideLoading();
    }

    // 计算数据范围
    const values = formattedData.map(item => item.value);
    const maxValue = Math.max(...values) || 1000;
    const minValue = Math.min(...values) || 0;

    // 参考example.js中的设置，配置地图选项
    const option = {
      title: {
        text: `全国各省${goodsType}二手商品交易量分布（千件）`,
        left: 'center',
        top: 20,
        textStyle: {
          color: '#ffffff',
          fontSize: 22,
          textShadowBlur: 5,
          textShadowColor: 'rgba(0, 0, 0, 0.3)'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          if (params.value) {
            return params.name + '<br/>交易量: ' + params.value.toLocaleString() + '件';
          } else {
            return params.name + '<br/>暂无数据';
          }
        },
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#555',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      visualMap: {
        min: minValue,
        max: maxValue,
        left: 'left',
        bottom: '5%',
        text: ['高', '低'],
        calculable: true,
        inRange: {
          color: ['#aeead0', '#abc9c1', '#a8a9b3', '#a588a4', '#a26795'],
        },
        textStyle: {
          color: '#ffffff'
        }
      },
      geo: {
        map: 'china',
        roam: true,
        scaleLimit: {
          min: 1,
          max: 10
        },
        zoom: 1.3,
        label: {
          show: true,
          fontSize: 12,
          color: 'rgba(255, 255, 255, 0.8)'
        },
        itemStyle: {
          areaColor: '#1a1c44',
          borderColor: '#53D9FF',
          borderWidth: 2.0,
          shadowColor: 'rgba(53, 142, 215, 0.9)',
          shadowBlur: 25
        },
        emphasis: {
          label: {
            show: true,
            color: '#fff'
          },
          itemStyle: {
            areaColor: '#0155B5'
          }
        }
      },
      series: [
        {
          name: '交易量',
          type: 'map',
          map: 'china',
          geoIndex: 0,
          symbolSize: 15,
          data: formattedData
        }
      ]
    };

    // 设置地图选项
    mapChart.setOption(option, true);
  }

  // 更新排行榜列表
  function updateRankList(sortedProvinces) {
    const rankList = document.getElementById('provinceRankList');
    rankList.innerHTML = '';

    sortedProvinces.forEach((province, index) => {
      const li = document.createElement('li');
      li.className = 'rank-item';

      // 根据排名添加不同的类名
      if (index < 3) {
        li.classList.add('top-' + (index + 1));
      }

      li.innerHTML = `
        <span class="rank-num">${index + 1}</span>
        <span class="rank-province">${province[0]}</span>
        <span class="rank-count">${province[1].toLocaleString()}件</span>
      `;

      rankList.appendChild(li);
    });
  }

  // 添加更新趋势分析的函数
  function updateTrendAnalysis(goodsType) {
    const trendList = document.getElementById('trendList');
    trendList.innerHTML = '';

    const trendItems = goodsTrendData[goodsType] || goodsTrendData['珠宝']; // 默认使用珠宝的趋势数据

    trendItems.forEach(item => {
      const li = document.createElement('li');
      li.innerHTML = `<span class="trend-point">${item.point}：</span>${item.desc}`;
      trendList.appendChild(li);
    });

    // 添加动画效果
    document.querySelector('.goods-trend-container').classList.add('fade-in');
    setTimeout(() => {
      document.querySelector('.goods-trend-container').classList.remove('fade-in');
    }, 500);
  }
});

// 在 map.js 文件中添加商品类型相关的趋势数据
const goodsTrendData = {
  '珠宝': [
    { point: '区域特征', desc: '沿海发达城市珠宝二手交易更活跃，北上广深占比超40%' },
    { point: '季节波动', desc: '节假日前后交易量提升25%，情人节、七夕等特殊日期尤为明显' },
    { point: '价格区间', desc: '中高端珠宝保值率高，二手交易价格约为原价的65%-85%' },
    { point: '品类偏好', desc: '黄金、钻石、手表等奢侈品牌是二手珠宝市场的主导产品' }
  ],
  '手机': [
    { point: '更新周期', desc: '高端手机二手交易集中在新机发布后1-3个月，年轻用户换机频率高' },
    { point: '品牌溢价', desc: 'iPhone等高端品牌在二手市场保值率最高，约为原价的60%-70%' },
    { point: '区域分布', desc: '一二线城市二手手机交易量占全国总量的65%以上' },
    { point: '交易渠道', desc: '线上平台成交量是实体店的3倍，95后用户是主要群体' }
  ],
  '相机': [
    { point: '收藏价值', desc: '老式胶片相机和限量版专业相机在二手市场逐年升值' },
    { point: '用户群体', desc: '专业摄影师和摄影爱好者是二手相机交易的主要群体' },
    { point: '保值能力', desc: '专业单反和微单相机保值率高于普通数码相机，约为原价的55%-75%' },
    { point: '季节特点', desc: '旅游旺季前二手相机交易量增加30%，毕业季也是交易高峰' }
  ],
  '电脑': [
    { point: '设备类型', desc: '轻薄笔记本和游戏本是二手电脑市场的主要交易品类' },
    { point: '更新动机', desc: '学生群体新学期开始前和专业人士升级设备是主要交易动力' },
    { point: '价格走势', desc: '高配置电脑贬值较慢，二手价格维持在原价的50%-70%' },
    { point: '地区差异', desc: 'IT产业发达城市二手电脑交易活跃度明显高于其他地区' }
  ],
  '电器家具': [
    { point: '流动人口', desc: '大学毕业季和租房旺季是二手家电家具的交易高峰期' },
    { point: '品类特点', desc: '小型家电和实木家具在二手市场最受欢迎，保值率较高' },
    { point: '交易半径', desc: '二手家具交易通常发生在同城，物流成本限制了跨区域交易' },
    { point: '环保意识', desc: '越来越多的年轻人选择二手家具以减少资源浪费和环境污染' }
  ],
  '图书': [
    { point: '知识热点', desc: '热门畅销书上市后6个月是二手书交易的高峰期' },
    { point: '院校分布', desc: '大学城周边二手书交易量是其他地区的5倍以上' },
    { point: '价格优势', desc: '二手书价格通常为新书的30%-50%，吸引大量学生群体' },
    { point: '数字化影响', desc: '纸质书二手交易量近年有所下降，但珍贵古籍和限量版图书价值上升' }
  ],
  '二手书': [
    { point: '学科类型', desc: '教材、考试辅导类书籍是二手书交易中的主要品类' },
    { point: '季节规律', desc: '开学季和期末季是二手书交易的两个高峰期' },
    { point: '交易平台', desc: '校园二手平台和社交媒体是大学生交易二手书的主要渠道' },
    { point: '环保价值', desc: '一本二手书的循环使用可减少约2千克碳排放' }
  ],
  '卡卷': [
    { point: '使用期限', desc: '接近过期的优惠券和礼品卡在二手平台有较大折扣' },
    { point: '品类分布', desc: '餐饮、娱乐、电商平台礼品卡是主要交易品类' },
    { point: '折扣幅度', desc: '大型品牌礼品卡二手价格约为面值的80%-95%' },
    { point: '诚信问题', desc: '卡券类二手交易面临的最大挑战是验证真伪和余额' }
  ],
  '箱包': [
    { point: '品牌效应', desc: '奢侈品牌箱包在二手市场保值率高，部分限量款甚至升值' },
    { point: '季节变化', desc: '开学季和出行旺季是二手箱包交易的高峰期' },
    { point: '品相要求', desc: '二手奢侈品箱包对品相要求极高，几乎全新的产品最受欢迎' },
    { point: '认证服务', desc: '专业鉴定服务的兴起促进了高端二手箱包市场的发展' }
  ],
  '文玩': [
    { point: '收藏价值', desc: '年份久远、做工精良的文玩在二手市场价格稳步上升' },
    { point: '文化传承', desc: '传统文玩在年轻收藏者中兴起，二手交易促进文化传承' },
    { point: '专业门槛', desc: '文玩二手交易需要专业知识，鉴别真伪是交易核心' },
    { point: '地域特色', desc: '北京、成都、扬州等传统文化城市是文玩二手交易的重要集散地' }
  ]
};




// 原始JSON数据
const fullData = [
  { "name": "vivo X200 (12GB+256GB)", "sale": 3799, "used_sale": "约2700" },
  { "name": "vivo X200 Pro (12GB+256GB)", "sale": 5299, "used_sale": "3200-3700" },
  { "name": "vivo X200 Pro mini (12GB+256GB)", "sale": 4699, "used_sale": "3000-3500" },
  { "name": "vivo S20 Pro (12GB+256GB)", "sale": 2634, "used_sale": "1800-2200" },
  { "name": "vivo S20 (8GB+256GB)", "sale": 2299, "used_sale": "约1500" },
  { "name": "vivo Y300i (12GB+256GB)", "sale": 1599, "used_sale": "1000-1200" },
  { "name": "vivo Y200 GT (8GB+128GB)", "sale": 1599, "used_sale": "800-1000" },
  { "name": "vivo X Fold3 Pro (16GB+512GB)", "sale": 9999, "used_sale": "5000-6000" },
  { "name": "vivo X50 Pro (8GB+256GB)", "sale": 4698, "used_sale": 2698 },
  { "name": "OPPO Find N5 (12GB+256GB)", "sale": 8999, "used_sale": "6000-7000（预计）" },
  { "name": "OPPO Find N5 (16GB+512GB)", "sale": 9999, "used_sale": "7500-8500（预计）" },
  { "name": "OPPO K12 Plus (8GB+256GB)", "sale": 1189, "used_sale": "800-1000（预计）" },
  { "name": "OPPO K12x (8GB+256GB)", "sale": 849, "used_sale": "500-700（预计）" },
  { "name": "OPPO A3 Pro (8GB+256GB)", "sale": 1282, "used_sale": "700-900（预计）" },
  { "name": "OPPO A57 (32GB)", "sale": "1899", "used_sale": 799 },
  { "name": "小米15 (12GB+256GB)", "sale": 3999, "used_sale": "3000-3500" },
  { "name": "小米14 (12GB+256GB)", "sale": "已降价（原4299）", "used_sale": "2500-3000" },
  { "name": "小米MIX4 (12GB+256GB)", "sale": "已停产（原5799）", "used_sale": "2500-3000" },
  { "name": "Redmi K80 (12GB+256GB)", "sale": 2124, "used_sale": "1500-1800" },
  { "name": "Redmi Turbo4 (8GB+256GB)", "sale": "预计1500+", "used_sale": "1000-1200" },
  { "name": "小米13 (12GB+256GB)", "sale": "约3000", "used_sale": "2000-2500" },
  { "name": "小米10至尊纪念版 (12GB+256GB)", "sale": "已停产（原5999）", "used_sale": "2500-3000" },
  { "name": "iPhone 16e (256GB)", "sale": "约6499", "used_sale": "约5800-6200" },
  { "name": "iPhone 16 (256GB)", "sale": "约7999", "used_sale": "约7100-7500" },
  { "name": "iPhone 16 Plus (256GB)", "sale": "约8999", "used_sale": "约8100-8500" },
  { "name": "iPhone 16 Pro (256GB)", "sale": "约10999", "used_sale": "约9800-10200" },
  { "name": "iPhone 16 Pro Max (256GB)", "sale": "约11999", "used_sale": "约10700-11100" },
  { "name": "iPhone SE4 (64GB)", "sale": "约4499", "used_sale": "约4000-4300" },
  { "name": "iPhone 15 (128GB)", "sale": "约6999", "used_sale": "约6300-6600" },
  { "name": "iPhone 15 Plus (128GB)", "sale": "约7999", "used_sale": "约7200-7600" },
  { "name": "iPhone 15 Pro (256GB)", "sale": "约9999", "used_sale": "约9000-9500" },
  { "name": "iPhone 15 Pro Max (256GB)", "sale": "约10999", "used_sale": "约9800-10200" },
  { "name": "iPhone 14 (128GB)", "sale": "约5999", "used_sale": "约5400-5700" },
  { "name": "iPhone 14 Plus (128GB)", "sale": "约6999", "used_sale": "约6300-6600" },
  { "name": "iPhone 14 Pro (256GB)", "sale": "约8999", "used_sale": "约8200-8600" },
  { "name": "iPhone 14 Pro Max (256GB)", "sale": "约9999", "used_sale": "约9000-9400" },
  { "name": "iPhone 13 (128GB)", "sale": "约4999", "used_sale": "约4500-4800" },
  { "name": "iPhone 13 Mini (64GB)", "sale": "约4499", "used_sale": "约4100-4300" },
  { "name": "iPhone 13 Pro (256GB)", "sale": "约7999", "used_sale": "约7200-7500" },
  { "name": "iPhone 13 Pro Max (256GB)", "sale": "约8999", "used_sale": "约8100-8500" },
  { "name": "华为Mate60 Pro+ (16GB+512GB)", "sale": "约5999", "used_sale": "约4500-5000" },
  { "name": "华为Mate70 Pro优享版 (12GB+512GB)", "sale": "约6699", "used_sale": "约5000-5500" },
  { "name": "华为Pura70 Pro+ (16GB+512GB)", "sale": "约5799", "used_sale": "约4300-4800" },
  { "name": "华为Nova12 Ultra (12GB+512GB)", "sale": "约2614", "used_sale": "约1800-2200" },
  { "name": "华为畅享70X (512GB)", "sale": "约1954", "used_sale": "约1500-1700" },
  { "name": "华为Mate X6典藏版 (12GB+1TB)", "sale": "约12999", "used_sale": "约9500-11000" },
  { "name": "华为Pura X (12GB+512GB)", "sale": "约8999", "used_sale": "约6500-7500" },
  { "name": "华为Nova13 (8GB+256GB)", "sale": "约2999", "used_sale": "约2200-2500" },
  { "name": "华为畅享70 Pro (256GB)", "sale": "约1599", "used_sale": "约1200-1400" },
  // 其他
  { "name": "荣耀X60 (8GB+256GB)", "sale": "1999", "used_sale": "1300-1600" },
  { "name": "荣耀Magic5 Pro (12GB+256GB)", "sale": "4999", "used_sale": "3800-4200" },
  { "name": "三星Galaxy S23 Ultra (12GB+256GB)", "sale": "8999", "used_sale": "7200-7800" },
  { "name": "三星Galaxy Z Fold5 (12GB+512GB)", "sale": "15999", "used_sale": "11000-12500" },
  { "name": "一加Ace 5 (12GB+256GB)", "sale": "2599", "used_sale": "1800-2100" },
  { "name": "真我GT Neo6 (12GB+256GB)", "sale": "2299", "used_sale": "1600-1900" },
  { "name": "iQOO Neo9s Pro+ (16GB+512GB)", "sale": "3999", "used_sale": "3000-3400" }
];

// 数据处理：提取品牌、转换价格
function processData() {
  return fullData.map(item => {
    let brand;
    if (item.name.startsWith('vivo')) {
      brand = 'vivo';
    } else if (item.name.startsWith('OPPO')) {
      brand = 'OPPO';
    } else if (item.name.startsWith('iPhone')) {
      brand = 'iPhone';
    } else if (item.name.startsWith('Redmi')) {
      brand = 'Redmi';
    } else if (item.name.startsWith('小米')) {
      brand = '小米';
    } else if (item.name.startsWith('华为')) {
      brand = '华为';
    } else {
      brand = '其他';
    }
    const sale = typeof item.sale === 'number' ? item.sale :
      parseFloat(item.sale.match(/\d+(\.\d+)?/)?.[0]) || 0;
    const usedSale = typeof item.used_sale === 'number' ? item.used_sale :
      parseFloat(item.used_sale.match(/\d+(\.\d+)?/g)?.[0]) || 0;
    return { ...item, brand, sale, usedSale };
  });
}

// 生成图表配置
function generateOption(brand) {
  const data = processData().filter(d => d.brand === brand);
  if (!data.length) {
    return {};
  }
  // 计算差价（全新价格 - 二手价格）
  const diffData = data.map(d => d.sale - d.usedSale);

  return {
    title: {
      text: `${brand} 手机价格对比`,
      textStyle: { color: '#ffffff' }
    },
    tooltip: {
      formatter: params => {
        const idx = params[0].dataIndex;
        const fullName = data[idx].name;
        const fullPrice = data[idx].sale;
        const usedPrice = data[idx].usedSale;
        const diff = fullPrice - usedPrice;
        return `${fullName}<br/>全新价: ${fullPrice} 元<br/>差价: ${diff} 元`;
      },
      textStyle: { color: '#ffffff' }
    },
    legend: {
      data: ['全新价格', '差价'],
      textStyle: { color: '#ffffff' }
    },
    xAxis: {
      type: 'category',
      data: data.map(d => d.name),
      axisLabel: { rotate: 45, textStyle: { color: '#ffffff' } },
      nameTextStyle: { color: '#ffffff' }
    },
    yAxis: {
      type: 'value',
      name: '价格（元）',
      axisLabel: { textStyle: { color: '#ffffff' } },
      nameTextStyle: { color: '#ffffff' }
    },
    series: [{
      name: '全新价格',
      type: 'bar',
      stack: 'total',
      data: data.map(d => d.sale),
      itemStyle: { color: '#087ad1' }
    }, {
      name: '差价',
      type: 'bar',
      stack: 'total',
      data: diffData,
      itemStyle: { color: '#d9e809' }
    }],
    grid: { bottom: '20%' },
    textStyle: { color: '#ffffff' }
  };
}

// 初始化图表
const chart = echarts.init(document.getElementById('chart'));
chart.setOption(generateOption('vivo'));

// 品牌切换
document.getElementById('brandSelect').addEventListener('change', function (e) {
  chart.setOption(generateOption(e.target.value));
});


echarts.registerTransform(ecStat.transform.regression);

const myChart = echarts.init(document.getElementById('phonemonthvalue'));
const option = {
  backgroundColor: 'transparent', // 修改此处为透明
  // title: {
  //     text: '不同品牌手机价格折旧趋势',
  //     left: 'center',
  //     textStyle: { 
  //         color: '#fff',
  //         fontSize: 18,
  //         textBorderColor: 'rgba(0,0,0,0.3)',  // 添加文字描边增强可读性
  //         textBorderWidth: 2
  //     }
  // },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' },
    backgroundColor: 'rgba(0,0,0,0.8)',
    textStyle: { color: '#fff' }
  },
  legend: {
    data: ['iPhone 13 Pro Max', '华为 Mate 40 Pro', '小米 11', '三星 Galaxy S21', 'OPPO Find X3 Pro'],
    textStyle: {
      color: '#fff',
      fontSize: 12  // 可调整字体大小
    },
    bottom: 10,
    itemGap: 40,      // 主要控制项间距
    itemWidth: 20,    // 图例图标宽度
    itemHeight: 12,   // 图例图标高度
    padding: [10, 20] // 整个图例容器的内边距
  },
  xAxis: {
    type: 'category',
    name: '使用时间\n（月）',
    nameTextStyle: {
      color: '#fff',
      fontSize: 14
    },
    data: ['0', '6', '12', '24'],
    axisLabel: {
      color: '#fff',
      fontSize: 12
    },
    axisLine: {
      lineStyle: {
        color: '#fff',
        width: 1.5
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '价格（元）',
    nameTextStyle: {
      color: '#fff',
      fontSize: 14
    },
    axisLabel: {
      formatter: '¥{value}',
      color: '#fff',
      fontSize: 12
    },
    axisLine: {
      lineStyle: {
        color: '#fff',
        width: 1.5
      }
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.15)',  // 调整网格线透明度
        width: 1.5
      }
    }
  },
  series: [
    {
      name: 'iPhone 13 Pro Max',
      type: 'line',
      smooth: true,
      data: [8999, 8199, 7499, 6299],
      itemStyle: { color: '#ff4c4c' }
    },
    {
      name: '华为 Mate 40 Pro',
      type: 'line',
      smooth: true,
      data: [6999, 6499, 5799, 4999],
      itemStyle: { color: '#ffb74c' }
    },
    {
      name: '小米 11',
      type: 'line',
      smooth: true,
      data: [3999, 3499, 2999, 2199],
      itemStyle: { color: '#4cff4c' }
    },
    {
      name: '三星 Galaxy S21',
      type: 'line',
      smooth: true,
      data: [5999, 5299, 4599, 3799],
      itemStyle: { color: '#4c9bff' }
    },
    {
      name: 'OPPO Find X3 Pro',
      type: 'line',
      smooth: true,
      data: [5499, 4999, 4299, 3599],
      itemStyle: { color: '#d14cff' }
    }
  ]
};

myChart.setOption(option);
window.addEventListener('resize', () => myChart.resize());


// 初始化图表
const radarChart = echarts.init(document.getElementById('radarchart'));

// 配置项
const radaroption = {
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
  title: {
    text: '多维度手机能力评估雷达图',
    left: 'center',
    textStyle: {
      fontSize: 22,
      color: '#ffffff'
    }
  },
  legend: {
    top: 60,
    textStyle: {
      color: '#666'
    }
  },
  radar: [
    {
      indicator: [
        { text: '<20岁' },
        { text: '20-30岁' },
        { text: '30-40岁' },
        { text: '40-50岁' },
        { text: '>50岁' }
      ],
      center: ['25%', '55%'],
      radius: 120,
      splitNumber: 4,
      axisName: {
        formatter: '【{value}】',
        color: '#ffffff',
        fontSize: 12
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(119, 234, 223, 0.3)', 'rgba(38, 195, 190, 0.3)',
            'rgba(100, 175, 233, 0.3)', 'rgba(66, 139, 212, 0.3)']
        }
      }
    },
    {
      indicator: [
        { text: '外存大小', max: 10 },
        { text: '处理器能力', max: 10 },
        { text: '手机屏幕', max: 10 },
        { text: '摄像拍照', max: 10 },
        { text: '电池续航', max: 10 },
        { text: '运行内存', max: 10 }
      ],
      center: ['75%', '55%'],
      radius: 120,
      axisName: {
        color: '#ffffff',
        // backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5],
        fontSize: 12
      }
    }
  ],
  series: [
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [
        {
          value: [30, 35, 20, 10, 5],
          name: '小米',
          areaStyle: {
            color: 'rgba(103, 249, 216, 0.4)'
          }
        },
        {
          value: [10, 25, 35, 40, 30],
          name: '华为',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.4)'
          }
        },
        {
          value: [15, 25, 20, 20, 15],
          name: 'VIVO',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.4)'
          }
        },
        {
          value: [20, 25, 25, 25, 20],
          name: 'OPPO',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.4)'
          }
        },
        {
          value: [25, 40, 30, 15, 5],
          name: 'iPhone',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.4)'
          }
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      data: [
        {
          value: [9, 9, 8, 8, 9, 9],
          name: '小米',
          areaStyle: {
            color: 'rgba(103, 249, 216, 0.4)'
          }
        },
        {
          value: [8, 8, 9, 10, 8, 8],
          name: '华为',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.4)'
          }
        },
        {
          value: [8, 7, 8, 9, 8, 8],
          name: 'VIVO',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.4)'
          }
        },
        {
          value: [8, 7, 8, 9, 8, 7],
          name: 'OPPO',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.4)'
          }
        },
        {
          value: [7, 10, 10, 9, 7, 10],
          name: 'iPhone',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.4)'
          }
        }
      ]
    }
  ]
};

// 应用配置
radarChart.setOption(radaroption);

// 响应式调整
window.addEventListener('resize', () => {
  radarChart.resize();
});


// 确保页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
  // 初始化 ECharts 实例
  var circleChart = echarts.init(document.getElementById('circlechart'));

  // 定义 gaugeData 和 option 配置
  const gaugeData = [
    {
      value: 20,
      name: 'Perfect',
      title: {
        offsetCenter: ['0%', '-50%']
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '-40%']
      }
    },
    {
      value: 40,
      name: 'Good',
      title: {
        offsetCenter: ['0%', '-20%']
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '-10%']
      }
    },
    {
      value: 60,
      name: 'Commonly',
      title: {
        offsetCenter: ['0%', '10%']
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '20%']
      }
    },
    {
      value: 20,
      name: 'bad',
      title: {
        offsetCenter: ['0%', '40%']
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '50%']
      }
    },
  ];
  var clrcleoption = {
    series: [
      {
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: '#464646'
          }
        },
        axisLine: {
          lineStyle: {
            width: 40
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        data: gaugeData,
        title: {
          fontSize: 14
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 14,
          color: 'inherit',
          borderColor: 'inherit',
          borderRadius: 20,
          borderWidth: 1,
          formatter: '{value}%'
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表
  circleChart.setOption(clrcleoption);

  // 设置定时器，每2秒更新一次数据
  setInterval(function () {
    gaugeData[0].value = +(Math.random() * 100).toFixed(2);
    gaugeData[1].value = +(Math.random() * 100).toFixed(2);
    gaugeData[2].value = +(Math.random() * 100).toFixed(2);
    gaugeData[2].value = +(Math.random() * 100).toFixed(2);
    circleChart.setOption({
      series: [
        {
          data: gaugeData,
          pointer: {
            show: false
          }
        }
      ]
    });
  }, 2000);
});